<template>
    <div>
        <!-- action 上传地址，before-upload 开始上传监听，on-success 上传成功监听 -->
        <!-- :headers 上传head，：data 上传附带的参数 -->

        <!-- 预览删除: on-preview, on-remove , before-remove -->
        <!-- multiple 多文件上传（bool），limit 上传个数限制，on-exceed 超出选择文件提示监听，file-list 选择的文件数据集-->

        <el-upload
            class="fileUpload"
            ref="upload"
            :action="uploadURL"
            :before-upload="beforeUpload"
            :on-success="successHandle"
            :on-error="errorHandle"
            :data="data"
            element-loading-text="上传中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :multiple="isMultiple"
            :limit="upFileNum"
            :on-exceed="handleExceed"
            :disabled="!isUpdisable"
            :file-list="fileList"
            :show-file-list="isShowFileList"
            :list-type="text"
        >
            <div v-if="isUpdisable" style="display: flex; justify-content: flex-start">
                <el-button size="small" type="primary" @click="clearUploaded">点击上传</el-button>
            </div>

            <div v-if="!isUpdisable && fileList.length == 0">
                <div style="display: flex; justify-content: flex-start">暂无上传视频</div>
            </div>
        </el-upload>

        <el-dialog :visible.sync="dialogVisible" @close="closeDialog">
            <el-row>
                <el-col :span="12">
                    <h4>正在播放的视频：{{ dialogVideoName }}</h4>
                </el-col>

                <el-col :span="12">
                    <div style="display: flex; justify-content: flex-end; margin: 0px 10px 10px 10px">
                        <el-button size="small" type="primary" @click="downFile">下载</el-button>
                    </div>
                </el-col>
            </el-row>

            <video :src="dialogVideoUrl" controls autoplay class="video" :ref="dialogVideo" width="100%"></video>
        </el-dialog>

        <div v-if="dialogVisible"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            fileList: [], //选择文件数据集
            loading: false, //上传加载loading
            isClickClearList: false,

            //图片显示弹窗
            dialogVideoUrl: '',
            dialogVideoName: '',
            dialogVideoId: '',
            dialogVisible: false,

            data: {
                TOKEN: sessionStorage.getItem('token')
            }, //上传附带的参数
            uploadURL: window.baseUrl + '/sys/file/upload' //上传地址
        };
    },

    //外部属性
    props: {
        isMultiple: {
            // 是否多文件上传
            type: Boolean,
            default: false
        },
        upFileNum: {
            //最大上传个数
            type: Number,
            default: 1,
            required: false
        },

        isClickClearList: {
            // 是否点击清空列表
            type: Boolean,
            default: true
        },
        isUpdisable: {
            //是否显示上传 按钮
            type: Boolean,
            default: true
        },
        isShowFileList: {
            // 是否显示文件列表
            type: Boolean,
            default: false
        },

        initfileList: {
            type: Array
        }
    },
    watch: {
        //initfileList 值的改变
        initfileList(value) {
            console.log('内容：', value);
            this.fileList = value;
        },
        //isClickClearList 值的改变
        isClickClearList(value) {
            this.isClickClearList = value;
        }
    },

    methods: {
        // 开始上传监听
        beforeUpload() {
            this.loading = true;
        },

        //上传成功监听
        successHandle(response, file, fileList) {
            console.log(fileList);
            if (response.code == '0000') {
                var url = window.baseUrl + '/sys/file/new/down?TOKEN=' + sessionStorage.getItem('token') + '&id=' + response.result[0];
                console.log('上传地址：', url);
                this.loading = false;

                this.$emit('moreUpFileSuccessHandle', [url, response.result[0], response, file, fileList]);
            } else {
                var showStr = file.name + ' 上传失败！';
                this.$message.error(showStr);
            }
        },
        //上传失败监听
        errorHandle(err, file, fileList) {
            console.log(err);
            this.$emit('moreUpFileErrorHandle', [err, file, fileList]);
        },

        //预览操作
        handlePreview(file) {
            this.$emit('moreUpFileHandlePreview', file);
            console.log('点击的视频：', file);
            var idStr = '';
            if (file.response != null) {
                idStr = file.response.result[0];
            } else {
                idStr = file.url;
            }

            var url = window.baseUrl + '/sys/file/showvideo' + '?id=' + idStr;
            var name = file.name;

            this.dialogVideoId = idStr;
            this.dialogVideoUrl = url;
            this.dialogVideoName = name;
            this.dialogVisible = true;

            if (this.$refs.dialogVideo.paused) {
                this.$refs.dialogVideo.play();
            } else {
                this.$refs.dialogVideo.pause();
            }
        },

        //删除操作
        handleRemove(file, fileList) {
            console.log(file, fileList);
            this.$emit('moreUpFileHandleRemove', [file, fileList]);
        },

        //删除前的提示操作
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },

        //选择文件超出提示
        handleExceed(files, fileList) {
            this.$emit('moreUpFileHandleExceed', [files, fileList]);
        },
        //下载文件
        downFile() {
            var reg = new RegExp('http://');
            var downId = this.dialogVideoId;

            if (reg.test(downId)) {
                var idIndex = downId.indexOf('id=');
                var idStr = downId.substring(idIndex, downId.length);

                if (idStr.indexOf('id=') != -1) {
                    window.location.href = window.baseUrl + '/sys/file/new/down?TOKEN=' + sessionStorage.getItem('token') + '&' + idStr;
                }
            } else {
                window.location.href = window.baseUrl + '/sys/file/new/down?TOKEN=' + sessionStorage.getItem('token') + '&id=' + downId;
            }
        },

        //清空重新上传
        clearUploaded() {
            if (this.isClickClearList) {
                this.$refs.upload.clearFiles();
                this.$emit('moreUpFileHandleRemove', [null, []]);
            }
        },
        closeDialog() {
            this.dialogVideoUrl = ''; //清空数据 关闭视频播放
        }
    }
};
</script>

<style>
.fileUpload .el-upload-list .el-upload-list__item {
    width: 300px;
}
.fileUpload .el-upload .el-upload--text {
    width: 300px;
    height: 40px;
}

/* 去边框 */
.fileUpload .el-upload--text,
.upload .el-form-item__content {
    border: 0px;
    height: 40px;
}
</style>